<template>
  <LoginHeader>联合登录</LoginHeader>
  <section class="container">
    <nav class="tab">
      <a
        href="javascript:;"
        @click="type = 'bind'"
        :class="{ active: type === 'bind' }"
      >
        <i class="iconfont icon-bind" />
        <span>已有小兔鲜账号，请绑定手机</span>
      </a>
      <a
        href="javascript:;"
        @click="type = 'patch'"
        :class="{ active: type === 'patch' }"
      >
        <i class="iconfont icon-edit" />
        <span>没有小兔鲜账号，请完善资料</span>
      </a>
    </nav>
    <keep-alive>
      <component :is="typeObj[type]" :union-id="unionId"></component>
    </keep-alive>
  </section>
  <LoginFooter />
</template>

<script>
import LoginHeader from './components/LoginHeader.vue'
import LoginFooter from './components/LoginFooter.vue'
import CallBackBind from './CallBackBind.vue'
import CallBackPatch from './CallBackPatch.vue'
// userQQLogin  引入第三方登录的接口 可以得到第三方登录唯一标识 qq openId
import { userQQLogin } from '@/api/login'
import { ref } from 'vue'
import QC from 'qc'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
export default {
  name: 'PageCallback',
  components: {
    LoginHeader,
    LoginFooter,
    CallBackBind,
    CallBackPatch
  },
  setup () {
    // 定义一个可枚举对象
    const typeRef = ref('bind')
    const typeObj = {
      bind: CallBackBind,
      patch: CallBackPatch
    }

    const store = useStore()
    const router = useRouter()
    const unionId = ref('')
    // 获取openId
    if (QC.Login.check()) {
      // 如果返回值是ture  进入 代表我们已经经历了登录的过程
      // 先判断当前是否登录了 通过QC公开的方法
      // QC.Login.check()  检查QQ是否已经登录  true
      // QC.Login.getMe()  获取用户标识openId 将来传给userQQLogin作为第一个参数
      QC.Login.getMe((openId) => {
        console.log('自动传过来的openId', openId) // 自动传过来的openId 11403758F30AB5145DC1C57D3610B018
        unionId.value = openId
        // 尝试登录  使用openId进行  如果可以登录 证明绑定过了   直接跳到首页
        // 如果不能直接登录 停到这个页面  后面的选择交给用户自己选择   停留到当前页
        userQQLogin(openId).then((res) => {
          console.log(res) // 如果绑定过  res拿到的是用户的数据  存数据 跳首页
          // 存用户信息
          store.commit('user/setUser', res.data.result)
          // 跳转首页
          router.push('/')
        })
      })
    }

    return {
      typeObj,
      type: typeRef,
      unionId
    }
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 25px 0;
}
.tab {
  background: #fff;
  height: 80px;
  padding-top: 40px;
  font-size: 18px;
  text-align: center;
  a {
    color: #666;
    display: inline-block;
    width: 350px;
    line-height: 40px;
    border-bottom: 2px solid #e4e4e4;
    i {
      font-size: 22px;
      vertical-align: middle;
    }
    span {
      vertical-align: middle;
      margin-left: 4px;
    }
    &.active {
      color: @xtxColor;
      border-color: @xtxColor;
    }
  }
}
.tab-content {
  min-height: 600px;
  background: #fff;
}
</style>
